﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <title>生产准备年统计</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/tempoBI.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: repeat-y;
    }

    #header {
      height: 60px;
      background-image: url(../images/抬头.png);
      background-size: 100% 60px;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-body {
      padding: 5px 15px;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }
  </style>
</head>

<body>
  <div class="layui-row" style="padding: 0 15px; margin-bottom: 10px;">
    <div class="layui-col-md12">
      <div id="header">
        生产准备年统计
      </div>
    </div>
  </div>
  <form class="layui-form" action="">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <!--<img src="../images/问题总数.png" height="30" alt="" />-->
              <span class="type"></span>本年各月统计
            </div>
            <div class="layui-card-body">
              <div id="monthData" style="width: 100%; height: 350px;">
              </div>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <!--<img src="../images/问题总数.png" height="30" alt="" />-->
              <span class="type"></span>生产准备各指标项年统计
            </div>
            <div class="layui-card-body">
              <div id="totalData" style="width: 100%; height: 350px;">
              </div>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
  <!-- 页眉区域 end-->
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      layui.use(['form', 'layer', 'table'], function () {
        var $ = layui.$;
        var layer = layui.layer;
        var grid = null;

        //本年各月统计
        function GetMonthData() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkPrepareYearData.ashx",
            dataType: "text",
            cashe: false,
            data: {
              type: 'GetMonthData'
            },
            beforeSend: function () {
              echarts.dispose(document.getElementById("monthData"));
              var chart = echarts.init(document.getElementById('monthData'));
              chart.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (result) {
              var data = JSON.parse(result);

              echarts.dispose(document.getElementById("monthData"));
              var chart = echarts.init(document.getElementById('monthData'));
              chart.hideLoading();

              var arrMonth = [];
              var arrPlanValue = [];
              var arrActualValue = [];
              var arrNotFinish = [];

              for (var i = 0; i < data.length; i++) {
                arrMonth.push(data[i]["PLANMONTH"]);
                arrPlanValue.push(data[i]["TOTAL"]);
                arrActualValue.push(data[i]["INPROCESSQTY"]);
                arrNotFinish.push(data[i]["DELAYQTY"]);
              };

              var option = {
                tooltip: {
                  trigger: 'axis',
                  show: true,
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                grid: {
                  left: '1%',
                  right: '1%',
                  bottom: '5%',
                  containLabel: true
                },
                legend: {
                  data: ['总项数', '已完成', '存在问题'],
                  x: '10',
                  y: '0',
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['rgb(60,176,244)', 'rgb(0,255,0)', 'rgb(255,0,0)'],
                xAxis: [{
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  },
                  data: arrMonth
                }],
                yAxis: [{
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  },
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: '#999',
                      type: 'dashed'
                    }
                  }
                }],
                series: [{
                  name: '总项数',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrPlanValue,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '已完成',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrActualValue,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '存在问题',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrNotFinish,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }]
              };

              chart.setOption(option);
            }
          });
        };
        GetMonthData();

        //生产准备各指标项年统计
        function GetWorkPrepareTotalYearData() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkPrepareYearData.ashx",
            dataType: "text",
            cashe: false,
            data: {
              type: 'GetWorkPrepareTotalYearData'
            },
            beforeSend: function () {
              echarts.dispose(document.getElementById("totalData"));
              var chart = echarts.init(document.getElementById('totalData'));
              chart.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (result) {
              var data = JSON.parse(result);

              echarts.dispose(document.getElementById("totalData"));
              var chart = echarts.init(document.getElementById('totalData'));
              chart.hideLoading();

              var arrWorkcentername = [];
              var arrPlanValue = [];
              var arrActualValue = [];
              var arrNotFinish = [];

              for (var i = 0; i < data.length; i++) {
                arrWorkcentername.push(data[i]["WORKCENTERNAME"]);
                arrPlanValue.push(data[i]["TOTAL"]);
                arrActualValue.push(data[i]["INPROCESSQTY"]);
                arrNotFinish.push(data[i]["DELAYQTY"]);
              };

              var option = {
                tooltip: {
                  trigger: 'axis',
                  show: true,
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                grid: {
                  left: '1%',
                  right: '1%',
                  bottom: '5%',
                  containLabel: true
                },
                legend: {
                  data: ['总项数', '已完成', '存在问题'],
                  x: '10',
                  y: '0',
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['rgb(60,176,244)', 'rgb(0,255,0)', 'rgb(255,0,0)'],
                xAxis: [{
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  },
                  data: arrWorkcentername
                }],
                yAxis: [{
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  },
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: '#999',
                      type: 'dashed'
                    }
                  }
                }],
                series: [{
                  name: '总项数',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrPlanValue,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '已完成',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrActualValue,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '存在问题',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrNotFinish,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }]
              };

              chart.setOption(option);
            }
          });
        };
        GetWorkPrepareTotalYearData();
      });
    });
  </script>
</body>

</html>